<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 17:39:47
 * @FilePath     : \src\App.vue
-->
<script setup lang="ts">
import { reactive, ref, toRaw } from "vue"

const obj = {
  name: '前端印象',
  age: 22
}

const state = reactive(obj)	
const raw = toRaw(state)

console.log(obj)
console.log(obj === raw)   // true

const changeAge = () => {
  raw.age = 23      //只修改数据，不渲染页面
  console.log(raw)  //{name: '前端印象', age: 23}
}
</script>

<template>
  <h3>toRaw</h3>
  <h5>
    作用：获取传入对象(ref 或 reactive 对象)的原始对象。只修改数据不渲染页面
  </h5>
  <h5>
    参数：<br>
    ref 或 reactive 对象的数据
  </h5>
  <h5>
    注意：<br>
    1、toRaw的参数：reactive的数据，无需.value，ref的数据需.value
  </h5>
  <ul>
    <li>{{state.age}}</li>
  </ul>
  <button @click="changeAge">改变age</button>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
